<template>
    <div>
        <button @click="handleFollow" v-if="!isFollowing">关注</button>
        <button @click="confirmUnfollow" v-else>取消关注</button>

        <modal v-if="showConfirm" @close="showConfirm = false">
            <template #header>
                <h3>确认取消关注</h3>
            </template>
            <template #body>
                <p>您确定要取消关注吗？</p>
            </template>
            <template #footer>
                <button @click="unfollow">确认</button>
                <button @click="showConfirm = false">取消</button>
            </template>
        </modal>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
    name: 'FollowButton',
    props: {
        initialFollowing: {
            type: Boolean,
            required: true,
        },
    },
    setup(props) {
        const isFollowing = ref(props.initialFollowing);
        const showConfirm = ref(false);

        const handleFollow = () => {
            isFollowing.value = true;
        };

        const confirmUnfollow = () => {
            showConfirm.value = true;
        };

        const unfollow = () => {
            isFollowing.value = false;
            showConfirm.value = false;
        };

        return {
            isFollowing,
            showConfirm,
            handleFollow,
            confirmUnfollow,
            unfollow,
        };
    },
});
</script>

<style scoped>
button {
    margin: 5px;
}
</style>
